<template>
	<div class="grid-layout-container">
        <el-card class="box-card">
			<grid-layout v-model:layout="state.layouts" :col-num="9" :row-height="140"
				:is-draggable="true" :is-resizable="false" :is-mirrored="false"
				:vertical-compact="true" :margin="[10, 10]" :use-css-transforms="true">
				<grid-item v-for="item in state.layouts"
					:x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
					<div class="flex-warp-item-box" :class="`home-animation${index}`">
						<div class="flex-margin">
							<i :class="item.icon" :style="{ color: item.iconColor }"></i>
							<span class="pl5">{{ item.i }}</span>
							<div class="mt10">{{ item.value }}</div>
						</div>
					</div>
				</grid-item>
			</grid-layout>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funGridLayout">
import { reactive } from 'vue';

// 定义变量内容
const state = reactive({
	layouts: [
		{ x: 0, y: 0, w: 1, h: 1, i: 0, icon: 'iconfont icon-yangan', value: '收入统计', iconColor: '#F72B3F', },
		{ x: 1, y: 0, w: 1, h: 1, i: 1, icon: 'iconfont icon-yangan', value: '商品统计', iconColor: '#F72B3F', },
		{ x: 2, y: 0, w: 1, h: 1, i: 2, icon: 'iconfont icon-yangan', value: '卡项统计', iconColor: '#F72B3F', },
		{ x: 3, y: 0, w: 1, h: 1, i: 3, icon: 'iconfont icon-yangan', value: '活动管理', iconColor: '#F72B3F', },
		{ x: 4, y: 0, w: 1, h: 1, i: 4, icon: 'iconfont icon-yangan', value: '充值管理', iconColor: '#F72B3F', },
		{ x: 5, y: 0, w: 1, h: 1, i: 5, icon: 'iconfont icon-yangan', value: '代金券管理', iconColor: '#F72B3F', },
		{ x: 6, y: 0, w: 1, h: 1, i: 6, icon: 'iconfont icon-yangan', value: '会员统计', iconColor: '#F72B3F', },
		{ x: 7, y: 0, w: 1, h: 1, i: 7, icon: 'iconfont icon-yangan', value: '库存查询', iconColor: '#F72B3F', },
		{ x: 8, y: 0, w: 1, h: 1, i: 8, icon: 'iconfont icon-yangan', value: '短信群发', iconColor: '#F72B3F', },
	],
});
</script>

<style scoped lang="scss">
.grid-layout-container {
	.vue-grid-item {
		color: var(--el-color-white);
	}
	.flex-warp-item-box {
		text-align: center;
		color: var(--el-text-color-primary);
		display: flex;
		height: 90px;
		height: 100%;
		border-radius: 5px;
		background: var(--next-bg-color);
		cursor: pointer;
		transition: all 0.3s ease;
		&:hover {
			background: var(--el-color-primary-light-9);
			transition: all 0.3s ease;
		}
	}
	.box-card :deep(.el-card__header){
		padding: 10px 20px !important;
	}
	.box-card :deep(.el-card__body){
		padding: 10px !important;
	}
	
}
</style>